<template>
  <!-- 画布标注 -->
  <div class="d-f j-c-s-b">
    <!-- 左边 -->
    <div
      class="left-container"
      @mousedown="handleMouseDown"
      @mouseup="handleMouseUp"
      @mousemove="handleMouseMove"
      @mouseover="handleMouseOver"
      @mouseleave="handleMouseLeave"
    >
      <img v-if="imgPath.length" id="img-marking" :src="imgPath" class="auto-size" draggable="false" @load="setSize">
      <!-- 十字架-->
      <div v-show="showCross" class="cross cross-vertical" :style="{ height: `${crossHeight}px`, top: `${containerTop}px`, left: `${mouseX}px`, }"></div>
      <div v-show="showCross" class="cross cross-horizontal" :style="{ width: `${crossWidth}px`, top: `${mouseY}px`, left: `${containerLeft}px`, }"></div>
      <template v-if="imgLoaded">
        <div
          v-for="(item, i) in rectList"
          :key="i"
          :class="i === selectedRectIndex ? 'rect rect-red' : 'rect rect-blue'"
          :style="{
            top: `${item.top * containerHeight + containerTop}px`,
            left: `${item.left * containerWidth + containerLeft}px`,
            width: `${(item.right - item.left) * containerWidth}px`,
            height: `${(item.bottom - item.top) * containerHeight}px`,
          }"
          @click.stop="rectClick(i)"
        ></div>
        <div
          v-show="showDrawingRect"
          class="rect rect-red"
          :style="{
            top: `${ Math.min(drawingPosition.startY, drawingPosition.endY) + containerTop }px`,
            left: `${ Math.min(drawingPosition.startX, drawingPosition.endX) + containerLeft }px`,
            width: `${Math.abs(drawingPosition.startX - drawingPosition.endX)}px`,
            height: `${Math.abs(drawingPosition.startY - drawingPosition.endY)}px`,
          }"
        ></div>
      </template>
    </div>
    <!-- 右边 -->
    <div class="right-sidebar">
      <h1>标注记录</h1>
      <div v-for="(item, i) in rectList" :key="i" class="">
        <div class="label">名称{{ i+1 }}：</div>
        <div class="d-f a-i-c" @click.stop="rectClick(i)">
          <el-input v-model="item.inputName" :disabled="i !== selectedRectIndex" size="small" placeholder="请输入内容"></el-input>
          <el-button type="danger" icon="el-icon-delete" size="mini" class="input-btn" @click="handleDelete(i)"></el-button>
        </div>
      </div>
      <el-button type="primary" class="save-btn" @click="handleSave">保存</el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ImageMarker',
  props: {
    imgPath: {
      type: String,
      required: true
    },
    rectList: {
      type: Array,
      required: true
    },
    selectedRectIndex: {
      type: Number,
      required: true
    },
    minimumSize: {
      type: Array,
      default: () => [50, 50]
    }
  },
  data() {
    return {
      imgLoaded: false,
      showCross: false,
      crossHeight: 0,
      crossWidth: 0,
      containerLeft: 0,
      containerRight: 0,
      containerTop: 0,
      containerBottom: 0,
      containerWidth: 0,
      containerHeight: 0,
      mouseX: 0,
      mouseY: 0,
      mouseOffset: 5,
      lastMouseDown: [0, 0],
      drawingRect: false,
      drawingPosition: {}
    }
  },
  computed: {
    showDrawingRect() {
      if (!this.drawingRect) {
        return false
      }
      if (
        Math.abs(this.drawingPosition.startY - this.drawingPosition.endY) < 8 &&
        Math.abs(this.drawingPosition.startY - this.drawingPosition.endY) < 8
      ) {
        return false
      }
      return true
    }
  },
  mounted() {
    window.addEventListener('resize', this.setSize)
  },
  unmounted() {
    window.removeEventListener('resize', this.setSize)
  },
  methods: {
    // 根据图片尺寸设置准星长度+尺寸自适应
    setSize() {
      this.imgLoaded = true
      const container = document.getElementById('img-marking')
      if (!container) return
      const { top, bottom, left, right } = container.getBoundingClientRect()
      console.log('打印123', container.getBoundingClientRect())

      this.crossHeight = bottom - top
      this.crossWidth = right - left
      this.containerTop = top
      this.containerBottom = bottom
      this.containerLeft = left
      this.containerRight = right
      this.containerWidth = right - left
      this.containerHeight = bottom - top
    },
    // 鼠标移动
    handleMouseMove(e) {
      this.showCross = e.clientX < this.containerRight && e.clientY < this.containerBottom
      if (!this.showCross) {
        return
      }
      this.mouseX = Math.max(e.clientX - this.mouseOffset, this.containerLeft)
      this.mouseY = Math.max(e.clientY - this.mouseOffset, this.containerTop)
      if (this.drawingRect) {
        this.drawingPosition = {
          ...this.drawingPosition,
          endX: this.mouseX - this.containerLeft,
          endY: this.mouseY - this.containerTop
        }
      }
    },
    // 鼠标移进
    handleMouseOver() {
      this.showCross = true
    },
    // 鼠标移出
    handleMouseLeave() {
      this.showCross = false
    },
    // 鼠标按下
    handleMouseDown(e) {
      this.drawingRect = true
      this.lastMouseDown = [e.clientX, e.clientY]
      this.drawingPosition = {
        startX: this.mouseX - this.containerLeft - this.mouseOffset,
        startY: this.mouseY - this.containerTop - this.mouseOffset,
        endX: this.mouseX - this.containerLeft - this.mouseOffset,
        endY: this.mouseY - this.containerTop - this.mouseOffset
      }
      console.log(this.rectList)
    },
    // 鼠标按起
    handleMouseUp(e) {
      this.drawingRect = false
      if (
        Math.abs(e.clientX - this.lastMouseDown[0]) < this.minimumSize[0] ||
        Math.abs(e.clientY - this.lastMouseDown[1]) < this.minimumSize[1]
      ) {
        return
      }
      const { startX, startY, endX, endY } = this.drawingPosition
      const list = this.rectList
      list.push({
        top: Math.min(startY, endY) / this.containerHeight,
        bottom: Math.max(startY, endY) / this.containerHeight,
        left: Math.min(startX, endX) / this.containerWidth,
        right: Math.max(startX, endX) / this.containerWidth
      })
      this.$emit('update:rectList', list)
      this.$emit('update:selectedRectIndex', list.length - 1)
    },
    // 点击方块
    rectClick(i) {
      this.$emit('update:selectedRectIndex', i)
    },
    // 删除
    handleDelete(i) {
      const list = this.rectList
      list.splice(i, 1)
      this.$emit('update:rectList', list)
    },
    // 保存
    handleSave() {
      console.log('保存', this.rectList)
    }
  }
}
</script>
<style lang="scss" scoped>
.d-f{ display: flex; }
.j-c-s-b{ justify-content: space-between; }
.a-i-c{ align-items: center; }
.right-sidebar{
  width: 19%;
  background: #fff;
  padding:0 20px;
  .label{ margin: 5px 0; }
  .input-btn{ margin-left:5px; }
  .save-btn{ margin-top: 50px; width: 100%; }
}
.left-container {
  width: 80%;
  height: 100%;
  user-select: none;
}
.auto-size {
  max-width: 100%;
  max-height: 100%;
}
.cross {
  position: absolute;
  background: #f85757;
  z-index: 99;
}
.cross-vertical { width: 2px; }
.cross-horizontal { height: 2px; }
.rect { position: absolute; z-index: 50; }
.rect-red {
  border: 1px solid rgb(212, 11, 11);
  background: rgba(125, 5, 5, 0.3);
}
.rect-blue {
  border: 1px solid rgb(3, 38, 165);
  background: rgba(3, 38, 165, 0.3);
}
</style>
